Оволодіння UI оверлеями: глибоке занурення в функцію `createPortal` React

У сучасній веб-розробці створення бездоганних та інтуїтивно зрозумілих інтерфейсів користувача є надзвичайно важливим. Часто це передбачає відображення елементів, які повинні виходити за межі ієрархії DOM їхнього батьківського компонента. Подумайте про модальні діалоги, банери сповіщень, підказки або навіть складні контекстні меню. Ці UI-елементи часто вимагають спеціальної обробки, щоб забезпечити їх правильне відтворення, накладання поверх іншого вмісту без втручання з боку контекстів стекування CSS z-index.

React, у своїй постійній еволюції, надає потужне рішення для цього конкретного завдання: функцію createPortal. Ця функція, доступна через react-dom, дозволяє вам візуалізувати дочірні компоненти у вузлі DOM, який існує за межами звичайної ієрархії компонентів React. Ця публікація в блозі буде служити вичерпним посібником з розуміння та ефективного використання createPortal, досліджуючи його основні концепції, практичне застосування та найкращі практики для глобальної аудиторії розробників.

Що таке `createPortal` і навіщо його використовувати?

В основі React.createPortal(child, container) – це функція, яка відображає компонент React (child) у іншому вузлі DOM (container), ніж той, який є батьком компонента React у дереві React.

Розберемо параметри:

• child: Це елемент React, рядок або фрагмент, який ви хочете відобразити. По суті, це те, що ви зазвичай повертаєте з методу render компонента.
• container: Це елемент DOM, який існує у вашому документі. Це ціль, до якої буде додано child.

Проблема: ієрархія DOM та контексти стекування CSS

Розглянемо типовий сценарій: модальний діалог. Модальні вікна, як правило, призначені для відображення поверх усього іншого вмісту на сторінці. Якщо ви візуалізуєте модальний компонент безпосередньо в іншому компоненті, який має обмежувальний стиль overflow: hidden або певне значення z-index, модальне вікно може бути обрізано або неправильно розташовано шарами. Це пов’язано з ієрархічною природою DOM і правилами контексту стекування CSS z-index.

Значення z-index в елементі впливає лише на порядок його стекування відносно його братів і сестер в одному контексті стекування. Якщо елемент-предок встановлює новий контекст стекування (наприклад, маючи position, відмінну від static, і z-index), дочірні елементи, візуалізовані в межах цього предка, будуть обмежені цим контекстом. Це може призвести до розчаровуючих проблем з компонуванням, коли ваш передбачуваний оверлей буде поховано під іншими елементами.

Рішення: createPortal на допомогу

createPortal елегантно вирішує це, розриваючи візуальний зв’язок між позицією компонента в дереві React і його позицією в дереві DOM. Ви можете відобразити компонент у порталі, і він буде доданий безпосередньо до вузла DOM, який є братом або дочірнім елементом body, ефективно обходячи проблемні контексти стекування предків.

Незважаючи на те, що портал відображає свій дочірній елемент у іншому вузлі DOM, він все одно поводиться як звичайний компонент React у вашому дереві React. Це означає, що розповсюдження подій працює, як і очікувалося: якщо обробник подій прикріплено до компонента, відтвореного порталом, подія все одно спливатиме через ієрархію компонентів React, а не лише ієрархію DOM.

Основні випадки використання для createPortal

Універсальність createPortal робить його незамінним інструментом для різних шаблонів UI:

1. Модальні вікна та діалоги

Це, мабуть, найпоширеніший і найпереконливіший випадок використання. Модальні вікна призначені для переривання робочого процесу користувача та привернення уваги. Відображення їх безпосередньо в компоненті може призвести до проблем із контекстом стекування.

Приклад сценарію: Уявіть собі програму електронної комерції, де користувачам потрібно підтвердити замовлення. Модальне вікно підтвердження має з’явитися поверх усього іншого на сторінці.

Ідея реалізації:

1. Створіть спеціальний елемент DOM у вашому файлі public/index.html (або створіть його динамічно). Поширена практика – мати <div id="modal-root"></div>, часто розташований у кінці тега <body>.
2. У вашій програмі React отримайте посилання на цей вузол DOM.
3. Коли ваш модальний компонент буде запущено, використовуйте ReactDOM.createPortal, щоб відобразити вміст модального вікна у вузлі DOM modal-root.

Фрагмент коду (концептуальний):

            // App.js
import React from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    

      
Welcome to Our Global Store!
       setIsModalOpen(true)}>Show Confirmation
      {isModalOpen && (
         setIsModalOpen(false)}>
          
Confirm Your Purchase
          
Are you sure you want to proceed?
        
      )}
    
  );
}

export default App;

// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  // Create a DOM element for the modal content to live in
  const element = document.createElement('div');

  React.useEffect(() => {
    // Append the element to the modal root when the component mounts
    modalRoot.appendChild(element);
    // Clean up by removing the element when the component unmounts
    return () => {
      modalRoot.removeChild(element);
    };
  }, [element]);

  return ReactDOM.createPortal(
    

      

        {children}
        Close
      
    
,
    element // Render into the element we created
  );
}

export default Modal;

            

              
                Copy
              
            
          

Цей підхід гарантує, що модальне вікно є прямим дочірнім елементом modal-root, який зазвичай додається до body, таким чином обходячи будь-які проміжні контексти стекування.

2. Підказки та спливаючі вікна

Підказки та спливаючі вікна – це невеликі UI-елементи, які з’являються, коли користувач взаємодіє з іншим елементом (наприклад, наводить курсор на кнопку або клацає значок). Вони також повинні відображатися над іншим вмістом, особливо якщо елемент, що запускає їх, вкладено глибоко в складне компонування.

Приклад сценарію: На міжнародній платформі для співпраці користувач наводить курсор на аватар члена команди, щоб побачити його контактні дані та статус доступності. Підказка має бути видимою незалежно від стилю батьківського контейнера аватара.

Ідея реалізації: Подібно до модальних вікон, ви можете створити портал для візуалізації підказок. Поширеним шаблоном є прикріплення підказки до загального кореня порталу або навіть безпосередньо до body, якщо у вас немає певного контейнера порталу.

Фрагмент коду (концептуальний):

            // Tooltip.js
import React from 'react';
import ReactDOM from 'react-dom';

function Tooltip({ children, targetElement }) {
  if (!targetElement) return null;

  // Render the tooltip content directly into the body
  return ReactDOM.createPortal(
    

      {children}
    
,
    document.body
  );
}

// Parent Component that triggers the tooltip
function InfoButton({ info }) {
  const [targetRef, setTargetRef] = React.useState(null);
  const [showTooltip, setShowTooltip] = React.useState(false);

  return (
    
 setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
      style={{ position: 'relative', display: 'inline-block' }}
    >
      ? {/* Information icon */}
      {showTooltip && {info}}
    
  );
}

            

              
                Copy
              
            
          

3. Меню випадаючого списку та поля вибору

Спеціальні меню випадаючого списку та поля вибору також можуть отримати переваги від порталів. Коли випадаючий список відкривається, йому часто потрібно виходити за межі меж батьківського контейнера, особливо якщо цей контейнер має такі властивості, як overflow: hidden.

Приклад сценарію: Внутрішня інформаційна панель багатонаціональної компанії містить спеціальний випадаючий список вибору для вибору проекту зі довгого списку. Випадаючий список не повинен бути обмежений шириною або висотою віджета інформаційної панелі, в якому він знаходиться.

Ідея реалізації: Візуалізуйте параметри випадаючого списку в портал, прикріплений до body або до спеціального кореня порталу.

4. Системи сповіщень

Глобальні системи сповіщень (спливаючі повідомлення, сповіщення) є ще одним чудовим кандидатом для createPortal. Ці повідомлення зазвичай з’являються у фіксованій позиції, часто у верхній або нижній частині вікна перегляду, незалежно від поточного положення прокручування або компонування батьківського компонента.

Приклад сценарію: Сайт бронювання подорожей відображає повідомлення підтвердження для успішних бронювань або повідомлення про помилки для невдалих платежів. Ці сповіщення повинні постійно з’являтися на екрані користувача.

Ідея реалізації: Спеціальний контейнер сповіщень (наприклад, <div id="notifications-root"></div>) можна використовувати з createPortal.

Як реалізувати createPortal у React

Реалізація createPortal включає кілька основних кроків:

Крок 1: Визначте або створіть цільовий вузол DOM

Вам потрібен елемент DOM за межами стандартного кореня React, щоб служити контейнером для вмісту вашого порталу. Найпоширенішою практикою є визначення цього у вашому основному файлі HTML (наприклад, public/index.html).

            <!-- public/index.html -->
<body>
  <noscript>You need JavaScript enabled to run this app.</noscript>
  <div id="root"></div>
  <div id="modal-root"></div>      <!-- For modals -->
  <div id="tooltip-root"></div>     <!-- Optionally for tooltips -->
</body>

            

              
                Copy
              
            
          

Крім того, ви можете динамічно створити елемент DOM протягом життєвого циклу вашої програми за допомогою JavaScript, як показано в прикладі Modal вище, а потім додати його до DOM. Однак попереднє визначення в HTML, як правило, чистіше для постійних коренів порталу.

Крок 2: Отримайте посилання на цільовий вузол DOM

У вашому компоненті React вам потрібно буде отримати доступ до цього вузла DOM. Ви можете зробити це за допомогою document.getElementById() або document.querySelector().

            // Somewhere in your component or utility file
const modalRootElement = document.getElementById('modal-root');
const tooltipRootElement = document.getElementById('tooltip-root');

// It's crucial to ensure these elements exist before attempting to use them.
// You might want to add checks or handle cases where they are not found.

            

              
                Copy
              
            
          

Крок 3: Використовуйте ReactDOM.createPortal

Імпортуйте ReactDOM і використовуйте функцію createPortal, передавши JSX вашого компонента як перший аргумент, а цільовий вузол DOM як другий.

Приклад: Відображення простого повідомлення в порталі

            // MessagePortal.js
import React from 'react';
import ReactDOM from 'react-dom';

function MessagePortal({ message }) {
  const portalContainer = document.getElementById('modal-root'); // Assuming you're using modal-root for this example

  if (!portalContainer) {
    console.error('Portal container "modal-root" not found!');
    return null;
  }

  return ReactDOM.createPortal(
    

      {message}
    
,
    portalContainer
  );
}

export default MessagePortal;

// In another component...
function Dashboard() {
  return (
    

      
Dashboard Overview
      
    
  );
}

            

              
                Copy
              
            
          

Керування станом та подіями з порталами

Однією з найважливіших переваг createPortal є те, що він не порушує систему обробки подій React. Події з елементів, візуалізованих всередині порталу, все одно спливатимуть через дерево компонентів React, а не лише через дерево DOM.

Приклад сценарію: Модальний діалог може містити форму. Коли користувач натискає кнопку всередині модального вікна, подія натискання має бути оброблена обробником подій у батьківському компоненті, який контролює видимість модального вікна, а не бути захопленою в ієрархії DOM самого модального вікна.

Ілюстративний приклад:

            // ModalWithEventHandling.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function ModalWithEventHandling({ children, onClose }) {
  const modalContentRef = React.useRef(null);

  // Using useEffect to create and clean up the DOM element
  const [wrapperElement] = React.useState(() => document.createElement('div'));

  React.useEffect(() => {
    modalRoot.appendChild(wrapperElement);
    return () => {
      modalRoot.removeChild(wrapperElement);
    };
  }, [wrapperElement]);

  // Handle clicks outside the modal content to close it
  const handleOutsideClick = (event) => {
    if (modalContentRef.current && !modalContentRef.current.contains(event.target)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    

      

        {children}
        Close Modal
      
    
,
    wrapperElement
  );
}

// App.js (using the modal)
function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    

      
App Content
       setShowModal(true)}>Open Modal
      {showModal && (
         setShowModal(false)}>
          
Important Information
          
This is content inside the modal.
           alert('Button inside modal clicked!')}>
            Action Button
          
        
      )}
    
  );
}

            

              
                Copy
              
            
          

У цьому прикладі натискання кнопки Close Modal правильно викликає властивість onClose, передану від батьківського компонента App. Аналогічно, якщо у вас був прослуховувач подій для кліків на modal-backdrop, він правильно запустив би функцію handleOutsideClick, навіть якщо модальне вікно візуалізується в окремому піддереві DOM.

Розширені шаблони та міркування

Динамічні портали

Ви можете створювати та видаляти контейнери порталу динамічно на основі потреб вашої програми, хоча підтримка постійних, заздалегідь визначених коренів порталу часто простіша.

Портали та візуалізація на стороні сервера (SSR)

Під час роботи з візуалізацією на стороні сервера (SSR) потрібно пам’ятати про те, як портали взаємодіють з початковим HTML. Оскільки портали візуалізуються у вузлах DOM, яких може не існувати на сервері, вам часто потрібно умовно візуалізувати вміст порталу або переконатися, що цільові вузли DOM присутні у виводі SSR.

Поширений шаблон – використовувати хук, наприклад useIsomorphicLayoutEffect (або спеціальний хук, який надає перевагу useLayoutEffect на клієнті та повертається до useEffect на сервері), щоб забезпечити маніпулювання DOM лише на клієнті.

            // usePortal.js (a common utility hook pattern)
import React, { useRef, useEffect } from 'react';

function usePortal(id) {
  const modalRootRef = useRef(null);

  useEffect(() => {
    let currentModalRoot = document.getElementById(id);
    if (!currentModalRoot) {
      currentModalRoot = document.createElement('div');
      currentModalRoot.setAttribute('id', id);
      document.body.appendChild(currentModalRoot);
    }
    modalRootRef.current = currentModalRoot;

    // Cleanup function to remove the created element if it was created by this hook
    return () => {
      // Be cautious with cleanup; only remove if it was actually created here
      // A more robust approach might involve tracking element creation.
    };
  }, [id]);

  return modalRootRef.current;
}

export default usePortal;

// Modal.js (using the hook)
import React from 'react';
import ReactDOM from 'react-dom';
import usePortal from './usePortal';

function Modal({ children, onClose }) {
  const portalTarget = usePortal('modal-root'); // Use our hook

  if (!portalTarget) return null;

  return ReactDOM.createPortal(
    

      
 e.stopPropagation()}> {/* Prevent closing by clicking inside */}
        {children}
      
    
,
    portalTarget
  );
}

            

              
                Copy
              
            
          

Для SSR ви зазвичай переконаєтеся, що div modal-root існує у вашому HTML, відтвореному сервером. Потім програма React на клієнті прикріпить до неї.

Стилізація порталів

Стилізація елементів у порталі вимагає ретельного розгляду. Оскільки вони часто знаходяться за межами контексту прямого батьківського стилю, ви можете застосувати глобальні стилі або використовувати CSS-модулі/styled-components, щоб ефективно керувати виглядом вмісту порталу.

Для накладень, таких як модальні вікна, вам часто знадобляться стилі, які:

• Фіксують елемент до вікна перегляду (position: fixed).
• Охоплюють все вікно перегляду (top: 0; left: 0; width: 100%; height: 100%;).
• Використовують високе значення z-index, щоб переконатися, що воно з’являється поверх усього іншого.
• Включіть напівпрозорий фон для фону.

Доступність

Під час реалізації модальних вікон або інших накладок доступність має вирішальне значення. Переконайтеся, що ви правильно керуєте фокусом:

• Коли модальне вікно відкривається, захоплюйте фокус у модальному вікні. Користувачі не повинні мати змоги переходити по вкладках за його межі.
• Коли модальне вікно закривається, поверніть фокус до елемента, який його запустив.
• Використовуйте атрибути ARIA (наприклад, role="dialog", aria-modal="true", aria-labelledby, aria-describedby), щоб повідомити допоміжні технології про природу модального вікна.

Такі бібліотеки, як Reach UI або Material-UI, часто надають доступні модальні компоненти, які вирішують ці проблеми за вас.

Потенційні підводні камені та як їх уникнути

Забули цільовий вузол DOM

Найпоширенішою помилкою є забуття створити цільовий вузол DOM у вашому HTML або неправильне посилання на нього у вашому JavaScript. Завжди переконайтеся, що ваш контейнер порталу існує, перш ніж намагатися його відобразити.

Спливання подій проти спливання DOM

У той час як події React спливають правильно через портали, власні події DOM – ні. Якщо ви прикріплюєте власні прослуховувачі подій DOM безпосередньо до елементів у порталі, вони спливатимуть лише деревом DOM, а не деревом компонентів React. За можливості дотримуйтеся системи синтетичних подій React.

Перекриваючі портали

Якщо у вас є кілька типів оверлеїв (модальні вікна, підказки, сповіщення), які всі візуалізуються на тіло або загальний корінь, керування порядком їх стекування може ускладнитися. Призначення певних значень z-index або використання системи управління порталами може допомогти.

Міркування щодо продуктивності

Хоча сам по собі createPortal ефективний, візуалізація складних компонентів у порталах все ще може впливати на продуктивність. Переконайтеся, що вміст вашого порталу оптимізовано, і уникайте непотрібних повторних візуалізацій.

Альтернативи createPortal

Хоча createPortal – це ідіоматичний спосіб React для вирішення цих сценаріїв, варто відзначити інші підходи, з якими ви можете зіткнутися або розглянути:

• Пряма маніпуляція DOM: Ви можете вручну створювати та додавати елементи DOM за допомогою document.createElement і appendChild, але це обходить декларативну візуалізацію та керування станом React, що робить його менш зручним у підтримці.
• Компоненти вищого порядку (HOC) або Render Props: Ці шаблони можуть абстрагувати логіку візуалізації порталу, але createPortal сам по собі є основним механізмом.
• Бібліотеки компонентів: Багато бібліотек компонентів UI (наприклад, Material-UI, Ant Design, Chakra UI) надають попередньо створені компоненти модальних вікон, підказок і випадаючих списків, які абстрагують використання createPortal, пропонуючи більш зручний досвід розробника. Однак розуміння createPortal має вирішальне значення для налаштування цих компонентів або створення власних.

Висновок

React.createPortal – це потужна та важлива функція для створення складних інтерфейсів користувача в React. Дозволяючи візуалізувати компоненти у вузлах DOM за межами ієрархії їхнього дерева React, він ефективно вирішує поширені проблеми, пов’язані з z-index CSS, контекстами стекування та переповненням елементів.

Незалежно від того, чи створюєте ви складні модальні діалоги для підтвердження користувачів, тонкі підказки для контекстної інформації чи глобально видимі банери сповіщень, createPortal забезпечує необхідну гнучкість і контроль. Пам’ятайте про керування вузлами DOM свого порталу, правильну обробку подій, а також про пріоритет доступності та продуктивності для справді надійного та зручного для користувача додатку, придатного для глобальної аудиторії з різним технічним досвідом і потребами.

Оволодіння createPortal, безсумнівно, підвищить ваші навички розробки React, дозволяючи вам створювати більш відшліфовані та професійні інтерфейси користувача, які виділяються в дедалі складнішому ландшафті сучасних веб-додатків.